<template>
  <div ref="echartsRef" class="echarts"></div>
</template>

<script setup lang="ts" name="pie">
import { ref } from "vue";
import * as echarts from "echarts";
import { useEcharts } from "@/hooks/useEcharts";

const echartsRef = ref<HTMLElement>();
const initChart = (data: any) => {
  console.log(data);
  let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
  let option: echarts.EChartsOption = {
    // color: ["#2293FB", "#58D9F9", "#FF6E76", "FFB78F", "#00CCCD", "#BBB0E9", "#41C8E6", "#BBB0E1", "#41C8E1"],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        selectedMode: "single",
        radius: [0, "30%"],
        // 添加 legendHoverLink 属性
        legendHoverLink: true,
        color: ["#2293FB", "#58D9F9", "#FF6E76"], // 第一个扇形图的颜色数组
        data: [
          { value: data.value.taskType[0], name: "送货收款" },
          { value: data.value.taskType[1], name: "退货" },
          { value: data.value.taskType[2], name: "换货" }
        ]
      },
      {
        name: "任务状态",
        type: "pie",
        radius: ["45%", "60%"],
        labelLine: {
          length: 30
        },

        label: {
          formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
          backgroundColor: "#F6F8FC",
          borderColor: "#8C8D8E",
          borderWidth: 1,
          borderRadius: 4,
          rich: {
            a: {
              color: "#6E7079",
              lineHeight: 22,
              align: "center"
            },
            hr: {
              borderColor: "#8C8D8E",
              width: "100%",
              borderWidth: 1,
              height: 0
            },
            b: {
              color: "#4C5058",
              fontSize: 14,
              fontWeight: "bold",
              lineHeight: 33
            },
            per: {
              color: "#fff",
              backgroundColor: "#4C5058",
              padding: [3, 4],
              borderRadius: 4
            }
          }
        },
        color: ["#FFB78F", "#00CCCD", "#BBB0E9", "#FF6E76", "#58D9F9"], // 第二个扇形图的颜色数组
        data: [
          { value: data.value.taskStatus[0], name: "待货" },
          { value: data.value.taskStatus[1], name: "待分配" },
          { value: data.value.taskStatus[2], name: "待领货" },
          { value: data.value.taskStatus[3], name: "待配送" },
          { value: data.value.taskStatus[4], name: "已完成" }
        ]
      }
    ]
  };
  useEcharts(myChart, option);
};

defineExpose({
  initChart
});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
